<template>
    <div>
        <el-table :data="parkings" style="width: 100%">
            <el-table-column label="地址">
                <template slot-scope="scope">
                    {{ scope.row.address }}
                    <!-- <img :src="'http://localhost:3000/images/'" alt="" /> -->
                </template>
            </el-table-column>
            <el-table-column label="车位号">
                <template slot-scope="scope">
                    {{ scope.row.number }}
                </template>
            </el-table-column>
            <el-table-column prop="property" label="产权信息">
            </el-table-column>
            <el-table-column prop="cycle" label="出租周期"> </el-table-column>
            <el-table-column prop="price" label="车位信息"> </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <!-- 用函数判断订单状态 -->
                    {{ state(scope.row.state) }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="ReviseStudent(scope.row._id)"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="delParkings(scope.row._id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 4, 5, 6]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
    "parkings"
);
const {
    mapActions: lessorsActions,
    mapState: lessorsState,
} = createNamespacedHelpers("lessors");
export default {
    async mounted() {
        // 调用验证是否携带token的函数并且拿到用户数据
        const lessorsData = await this.isLogin();
        // 获取所有出租方的车位信息
        this.getParkings({ lessorsId: lessorsData[0]._id });
    },
    methods: {
        ...mapActions(["getParkings", "deleteParkings"]),
        ...mapMutations(["clickPage", "changePageSize"]),
        ...lessorsActions(["isLogin"]),
        state(state) {
            if (state == 1) {
                return "待审核";
            } else if (state == 2) {
                return "审核通过";
            } else if (state == 3) {
                return "审核未通过";
            } else if (state == 4) {
                return "已上架";
            } else if (state == 5) {
                return "已出租";
            }
        },
        // 删除车位 1.先获取要删除的车位信息
        async delParkings(id) {
            console.log(id);
            const { data } = await this.deleteParkings({ _id: id });
            if (data.status) {
                console.log("删除成功");
                if (this.parkings.length == 1) {
                    this.clickPage(1);
                }
                this.getParkings({ lessorsId: this.lessorsAccount[0]._id });
            }
        },
        // 编辑
        ReviseStudent(id) {
            // 点击修改就跳转到修改页面
            this.$router.push(`/system/ReviseParkings/${id}`);
        },
        // 每页显示条数
        handleSizeChange(val) {
            this.changePageSize(val);
            this.getParkings({ lessorsId: this.lessorsAccount[0]._id });
        },
        // 翻页
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.clickPage(val);
            this.getParkings({ lessorsId: this.lessorsAccount[0]._id });
        },
    },
    computed: {
        ...mapState([
            "parkings",
            "currentPage",
            "pageSize",
            "total",
            "lastPage",
        ]),
        ...lessorsState(["lessorsAccount"]),
    },
};
</script>

<style>
</style>